<template>
  <el-icon v-if="isIcon('el-icon-')"><component :is="iconName || 'el-icon-menu'"/></el-icon>
  <svg-icon v-if="isIcon('ht-icon-')" :iconName="iconName"></svg-icon>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
  iconName: {
    type: String,
    required: true
  },
  active: {
    type: Boolean,
    default: false
  },
  className: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: '#6d7882'
  },
  activeColor: {
    type: String,
    default: '#409eff'
  }
});
const iconColor = computed(()=>{
  return props.active ? props.activeColor : props.color;
})
const isIcon = function (iconPrefix: string){
  return props.iconName && props.iconName.indexOf(iconPrefix) > -1;
}
</script>

<style scoped>

</style>